<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="../css/layui.css" media="all">
  <script src="../js/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">楚瑞涛博客管理后台</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="XXX" class="layui-nav-img" alt="头像">
          楚瑞涛
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">用户模块
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">用户管理</a></dd>
            <dd><a href="javascript:;">权限申请管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">博客管理
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd class="layui-this"><a href="javascript:;">博客管理</a></dd>
            <dd><a href="javascript:;">类别管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">评论管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">系统设置</a>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
            <div class="search_user">
                搜索博客：
                <div class="layui-inline">
                    <input class="layui-input" name="keyword" id="search_username" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
                <a href="./blog.php" class="layui-btn" >新增博客</a>
            </div>
            <table class="layui-hide" id="user_info" lay-filter="user_info"></table>
             
            <script type="text/html" id="userBar">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">冻结</a>
            </script>
             
            <script>
            layui.use('table', function(){
              var table = layui.table;
              
              table.render({
                elem: '#user_info'
                ,url:'test/user_info.json'
                ,title: '博客数据表'
                ,cols: [[
                    {field:'id', title:'ID', width:100, unresize: true, sort: true}
                    ,{field:'username', title:'用户名', width:150}
                    ,{field:'sex', title:'头像', width:100}
                    ,{field:'last_time', title:'上次登陆时间', sort: true, width:150}
                    ,{field:'state', title:'登陆状态', width:130}
                    ,{field:'frozen', title:'冻结状态', sort: true, width:130}
                    ,{field:'frozen', title:'发博客', sort: true, width:130}
                    ,{field:'frozen', title:'发评论', sort: true, width:130}
                    ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:120}
                ]]
                ,limit:16
                ,page: true
                ,width: 1150
              });
              
              //监听行工具事件
              table.on('tool(userBar)', function(obj){
                var data = obj.data;
                console.log(obj)
                if(obj.event === 'del'){
                  layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                  });
                } else if(obj.event === 'edit'){
                  layer.prompt({
                    formType: 2
                    ,value: data.email
                  }, function(value, index){
                    obj.update({
                      email: value
                    });
                    layer.close(index);
                  });
                }
              });
            });
            </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>

<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
});
</script>
</body>
</html>